<!DOCTYPE html>
<html>

<head>

	<meta charset="utf-8">
	<title>网站首页</title>
	<link href="css/home.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div class="home">
		<div class="top">
			<table border="0" class="top1">
				<tr>
					<td><img src="image/1.jpg" style="margin-left: 30px; margin-right: -3px; border-radius: 10px;"></td>
					<td>
						<p>首页</p>
					</td>
					<td class="top1-1">
						<ul>
							<li style="list-style-type: none;"><a href="#">
									<p>番剧</p>
								</a>
							</li>
						</ul>
					</td>
					<td>
						<p>
						<div class="livebroadcast">
							<p>直播</p>
							<div class="livebroadcast-hide-top"
								style="height: 20px; width: 100%; background-color:transparent;"></div>
							<div class="livebroadcast-hide">
								<div class="livebroadcast-hide-left">
									<div class="livebroadcast-hide-left-top">
										<p style="color: #000000; font-size: 27px;">热门直播</p>
										<a href="#" style="float: left; margin-top: 27px; text-decoration: none;"><img
												src="image/20.webp"
												style="height: 60px;width: 60px; border-radius: 100px;"><br>
											<p
												style="font-size: 8px;color: #000000;text-align: center; padding-top: 10px;">
												Gensokyou</p>
										</a>
										<a href="#" style="float: left; margin-top: 27px; text-decoration: none;"><img
												src="image/21.webp"
												style="height: 60px;width: 60px; border-radius: 100px;"><br>
											<p
												style="font-size: 8px;color: #000000;text-align: center;padding-top: 10px;">
												赵则鹿</p>
										</a>
										<a href="#" style="float: left; margin-top: 27px; text-decoration: none;"><img
												src="image/22.webp"
												style="height: 60px;width: 60px; border-radius: 100px;"><br>
											<p
												style="font-size: 8px;color: #000000;text-align: center; padding-top: 10px;">
												Jr_影枫爵</p>
										</a>
									</div>
									<div class="livebroadcast-hide-left-bottom">
										<a href="#" style="float: left; margin-top: 27px; text-decoration: none;"><img
												src="image/23.webp"
												style="height: 60px;width: 60px; border-radius: 100px;"><br>
											<p
												style="font-size: 8px;color: #000000;text-align: center; padding-top: 10px;">
												知音高渐离</p>
										</a>
										<a href="#" style="float: left; margin-top: 27px; text-decoration: none;"><img
												src="image/24.webp"
												style="height: 60px;width: 60px; border-radius: 100px;"><br>
											<p
												style="font-size: 8px;color: #000000;text-align: center; padding-top: 10px;">
												逍飞free</p>
										</a>
										<a href="#" style="float: left; margin-top: 27px; text-decoration: none;"><img
												src="image/25.webp"
												style="height: 60px;width: 60px; border-radius: 100px;"><br>
											<p
												style="font-size: 8px;color: #000000;text-align: center; padding-top: 10px;">
												英雄联盟赛事</p>
										</a>
									</div>
								</div>
								<div class="livebroadcast-hide-right">
									<div class="livebroadcast-hide-right-top">
										<p style="color: #000000; font-size: 27px;">热门直播</p>
										<a href="#" style="float: left; margin-top: 27px; text-decoration: none;"><img
												src="image/2.jpg"
												style="height: 60px;width: 60px; border-radius: 100px;"><br><br>
											<p style="font-size: 8px;color: #000000;text-align: center;">大仙</p>
										</a>
										<a href="#" style="float: left; margin-top: 27px; text-decoration: none;"><img
												src="image/2.jpg"
												style="height: 60px;width: 60px; border-radius: 100px;"><br><br>
											<p style="font-size: 8px;color: #000000;text-align: center;">大仙</p>
										</a>
										<a href="#" style="float: left; margin-top: 27px; text-decoration: none;"><img
												src="image/2.jpg"
												style="height: 60px;width: 60px; border-radius: 100px;"><br><br>
											<p style="font-size: 8px;color: #000000;text-align: center;">大仙</p>
										</a>
									</div>
									<div class="livebroadcast-hide-right-bottom">
										<a href="#" style="float: left; margin-top: 27px; text-decoration: none;"><img
												src="image/2.jpg"
												style="height: 60px;width: 60px; border-radius: 100px;"><br><br>
											<p style="font-size: 8px;color: #000000;text-align: center;">大仙</p>
										</a>
										<a href="#" style="float: left; margin-top: 27px; text-decoration: none;"><img
												src="image/2.jpg"
												style="height: 60px;width: 60px; border-radius: 100px;"><br><br>
											<p style="font-size: 8px;color: #000000;text-align: center;">大仙</p>
										</a>
										<a href="#" style="float: left; margin-top: 27px; text-decoration: none;"><img
												src="image/2.jpg"
												style="height: 60px;width: 60px; border-radius: 100px;"><br><br>
											<p style="font-size: 8px;color: #000000;text-align: center;">大仙</p>
										</a>
									</div>
								</div>
							</div>
						</div>
						</p>
					</td>
					<td>
						<p>
						<div class="livebroadcast">
							<p>游戏</p>
							<div class="livebroadcast-hide-top"
								style="height: 20px; width: 100%; background-color:transparent;margin-top: 0px;"></div>
							<div class="livebroadcast-hide">

								<div class="livebroadcast-hide-left">
									<p>热门直播</p>
									<a href="#"><img src="image/2.jpg"></a>
								</div>
							</div>
						</div>
						</p>
					</td>
					<td>
						<p>
						<div class="livebroadcast">
							<p>会员购</p>
							<div class="livebroadcast-hide-top"
								style="height: 20px; width: 100%; background-color:transparent;margin-top: 0px;"></div>
							<div class="livebroadcast-hide">

								<div class="livebroadcast-hide-left">
									<p>热门直播</p>
									<a href="#"><img src="image/2.jpg"></a>
								</div>
							</div>
						</div>
						</p>
					</td>
					<td>
						<p>
						<div class="livebroadcast">
							<p>直播</p>
							<div class="livebroadcast-hide-top"
								style="height: 20px; width: 100%; background-color:transparent;margin-top: 0px;"></div>
							<div class="livebroadcast-hide">

								<div class="livebroadcast-hide-left">
									<p>热门直播</p>
									<a href="#"><img src="image/2.jpg"></a>
								</div>
							</div>
						</div>
						</p>
					</td>
					<td>
						<p>
						<div class="livebroadcast">
							<p>直播</p>
							<div class="livebroadcast-hide-top"
								style="height: 20px; width: 100%; background-color:transparent;margin-top: 0px;"></div>
							<div class="livebroadcast-hide">

								<div class="livebroadcast-hide-left">
									<p>热门直播</p>
									<a href="#"><img src="image/2.jpg"></a>
								</div>
							</div>
						</div>
						</p>
					</td>
					<td>
						<p>下载APP</p>
					</td>
					<td id="sea">
						<input type="text" placeholder="搜索.." id="search">
					</td>
					<td><a href="https://www.bilibili.com/"><img src="image/2.jpg"
								style="border-radius: 20px; width: 40px; height: 40px;"></a></td>
					<td>
						<div>
							<table border="0" class="top2">
								<tr>
									<td>
										<img src="image/3.jpg" style="margin-left: 10px;">
									</td>
									<td>
										<img src="image/4.jpg">
									</td>
									<td>
										<img src="image/5.jpg">
									</td>
									<td>
										<img src="image/6.jpg">
									</td>
									<td>
										<img src="image/7.jpg">
									</td>
									<td>
										<img src="image/1.jpg" style="margin-left: 18px;">
									</td>
								</tr>
								<tr>
									<td>
										<p>大会员</p>
									</td>
									<td>
										<p>消息</p>
									</td>
									<td>
										<p>动态</p>
									</td>
									<td>
										<p>收藏</p>
									</td>
									<td>
										<p>历史</p>
									</td>
									<td>
										<p>创作中心</p>
									</td>
								</tr>
							</table>
						</div>
					</td>
					<td>
						<button>投稿</button>
					</td>
				</tr>
			</table>
		</div>
		<div class="middle1">
			<table border="0">
				<tr>
					<td>
						<div class="middle1-1">
							<table border="0" class="middle1-img">
								<tr>
									<td><img src="image/1.jpg"></td>
									<td><img src="image/2.jpg"></td>
									<td><img src="image/3.jpg"></td>
								</tr>
								<tr>
									<td>
										<p>动态</p>
									</td>
									<td>
										<p>热门</p>
									</td>
									<td>
										<p>频道</p>
									</td>
								</tr>
							</table>
						</div>
					</td>
					<td>
						<div class="middle1-2">
							<table border="0" class="middle1-button">
								<tr>
									<td><button>番剧</button></td>
									<td><button>国创</button></td>
									<td><button>综艺</button></td>
									<td><button>动画</button></td>
									<td><button>鬼畜</button></td>
									<td><button>舞蹈</button></td>
									<td><button>娱乐</button></td>
									<td><button>科技</button></td>
									<td><button>美食</button></td>
									<td><button>汽车</button></td>
									<td><button>运动</button></td>
									<td><button>VOLG</button></td>
								</tr>
								<tr>
									<td><button>电影</button></td>
									<td><button>电视剧</button></td>
									<td><button>纪录片</button></td>
									<td><button>游戏</button></td>
									<td><button>音乐</button></td>
									<td><button>影视</button></td>
									<td><button>知识</button></td>
									<td><button>资讯</button></td>
									<td><button>生活</button></td>
									<td><button>时尚</button></td>
									<td><button>动物圈</button></td>
									<td><button>更多</button></td>
								</tr>
							</table>
						</div>
					</td>
					<td>
						<div class="middle1-xian">
						</div>
					</td>
					<td>
						<div class="middle1-3">
							<table border="0" class="middle1-p">
								<tr>
									<td>
										<p>专栏</p>
									</td>
									<td>
										<p>活动</p>
									</td>
									<td>
										<p>社区中心</p>
									</td>
								</tr>
								<tr>
									<td>
										<p>直播</p>
									</td>
									<td>
										<p>课堂</p>
									</td>
									<td>
										<p>新歌热榜</p>
									</td>
								</tr>
							</table>
						</div>
					</td>
				</tr>
			</table>
		</div>
		<div class="middle2">
			<table border="0">
				<tr>
					<td>
						<div class="middle2-1">
							<!-- <img src="image/2.jpg"> -->
							<ul class="images">
								<oi class="img"></oi>
								<oi class="img"></oi>
								<oi class="img"></oi>
							</ul>
							<ul class="min-images">
								<oi class="min"></oi>
								<oi class="min"></oi>
								<oi class="min"></oi>
							</ul>
							<div class="button">
								<div class="button-left">
									< </div>
										<div class="button-right">></div>
								</div>
							</div>
					</td>
					<td>
						<table border="0" class="middle2-2">
							<tr>
								<td>
									<img src="image/4.jpg"><br>
									<p>他好像什么都玩了，
										但好像什么都没玩</p>
								</td>
								<td>
									<img src="image/6.jpg"><br>
									<p>在我的梦里，你从未离去<br>
										&nbsp;
									</p>
								</td>
								<td>
									<img src="image/13.jpg"><br>
									<p>2022三体拜年祭<br>
										&nbsp;</p>
								</td>
								<td>
									<img src="image/2.jpg"><br>
									<p>我的世界up主接力建筑（第三期）
									</p>
								</td>
							</tr>
							<tr>
								<td>
									<img src="image/12.jpg"><br>
									<p>【像素画教程】像素画抖动的技巧<br>
									</p>
								</td>
								<td>
									<img src="image/8.jpg"><br>
									<p>烦人的成龙<br>
										&nbsp;</p>
								</td>
								<td>
									<img src="image/14.jpg"><br>
									<p>【原神/搬运】海的那边，是天理<br>
									</p>
								</td>
								<td>
									<img src="image/15.jpg"><br>
									<p>特朗普：美国政府脸都不要了<br>
									</p>
								</td>
							</tr>
						</table>
					</td>

				</tr>
			</table>

		</div>
		<div class="middle3">
			<td>
				<p style="font-size: 30px; margin-left: 70px; font-weight: bold;">推广</p>
			</td>
			<table border="0" class="middle3-1">
				<tr>
					<td style="padding-left: 38px;">
						<img src="image/16.jpg"><br>
						<p>卧槽，小说女主有了脸<br>
						</p>
					</td>
					<td>
						<img src="image/17.jpg">
						<p>卧槽，小说男主有了脸<br>
						</p>
					</td>
					<td>
						<img src="image/18.jpg">
						<p>老头环打人事件<br>
						</p>
					</td>
					<td>
						<img src="image/19.jpg">
						<p>《高智商俱乐部》</p>
					</td>
				</tr>
			</table>
		</div>
		<div class="bottom">
			<div class="bottom-1">
				<table class="bottom-1-1">
					<tr>
						<td>
							<p>bilibili</p>
							<ul>
								<li><a href="#">关于我们&nbsp;&nbsp;</a></li>
								<li><a href="#">联系我们&nbsp;&nbsp;</a></li>
								<li><a href="#">用户协议&nbsp;&nbsp;</a></li>
								<li><a href="#">加入我们&nbsp;&nbsp;</a></li>
							</ul>
							<ul>
								<li><a href="#">友情链接&nbsp;&nbsp;</a></li>
								<li><a href="#">隐私协议&nbsp;&nbsp;</a></li>
								<li><a href="#">bilibili认证&nbsp;&nbsp;</a></li>
							</ul>
							<ul>
								<li><a href="#">Inverstor Relations&nbsp;&nbsp;</a></li>
							</ul>
						</td>
						<td>
							<p>传送门</p>
							<ul>
								<li><a href="#">协议汇总&nbsp;&nbsp;</a></li>
								<li><a href="#">活动中心&nbsp;&nbsp;</a></li>
								<li><a href="#">活动专题页&nbsp;&nbsp;</a></li>
								<li><a href="#">侵权申诉&nbsp;&nbsp;</a></li>
								<li><a href="#">帮助中心&nbsp;&nbsp;</a></li>
							</ul>
							<ul>
								<li><a href="#">社区中心&nbsp;&nbsp;</a></li>
								<li><a href="#">壁纸站&nbsp;&nbsp;</a></li>
								<li><a href="#">广告合作&nbsp;&nbsp;</a></li>
								<li><a href="#">名人堂&nbsp;&nbsp;</a></li>
								<li><a href="#">MCN管理中心&nbsp;&nbsp;</a></li>
							</ul>
							<ul>
								<li><a href="#">高级弹幕&nbsp;&nbsp;</a></li>
								<li><a href="#">品牌号官网&nbsp;&nbsp;</a></li>
							</ul>
						</td>
						<td>
							<div class="bottom-2">
								<table border="0" class="bottom-2-1">
									<tr>
										<td><img src="image/9.jpg"><br>
											<p>下载APP</p>
										</td>
										<td><img src="image/9.jpg"><br>
											<p>公益</p>
										</td>
										<td><img src="image/9.jpg"><br>
											<p>官方微博</p>
										</td>
										<td><img src="image/9.jpg"><br>
											<p>官方微信</p>
										</td>
									</tr>
								</table>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="js/home.js"></script>
</body>


</html>